<template>
  <div>
    <van-uploader
      result-type="file"
      :accept="'image/*'"
      :after-read="afterRead"
      v-model="fileList"
    >
    </van-uploader>
  </div>
</template>

<script>
import axiosInstance from '../../network/qiniu'
export default {
  data() {
    return {
      pic_url: [],
      fileList: [],
    };
  },
  methods: {
    async afterRead(file) {
      const res = await this.request.get("/qiniuToken");
      if (res.status == 0) {
        const token = res.qiniutoken;
        let formData = new FormData();
        formData.append("token", token); //七牛需要的token，后台获取的
        formData.append("file", file["file"]); //图片文件
        //key 是上传到七牛云的名字
        const current = new Date().getTime();
        const key = `pic_${current}_${file.file.name}`; // key为上传后文件名 必填
        formData.append("key", key);
        const { data: result } = await axiosInstance({
          changeOrigin: true,
          method: "POST",
          data: formData,
          //进度条
          // onUploadProgress:(ProgressEvent) => {
          //   let imgLoadPercent = Math.round(ProgressEvent.loaded * 100 / ProgressEvent.total)
          // }
        });
        const url = "http://r7gaow1xy.hn-bkt.clouddn.com/" + result.key;
        this.pic_url.push(url);
        this.$emit("func", this.pic_url);
      } else {
        this.$toast("查询失败！");
      }
    },
  },
};
</script>